<template>
	<view class="content">
		<view class="nav">
			<image src="http://q79q98ocd.bkt.clouddn.com/back.png" @click="toPro()"></image>
			<text class="title">
				<text class="green">交易勋章</text>
				<text class="greens" @click="gosupply()">商家等级</text>
			</text>
		</view>
		<view class="box">
			<view class="modeal-top">
				<view class="mes">
					<image src="../../static/img/headers.png"></image>
					<view class="name">用户名</view>
					<view class="more">勋章血多，供应排名越高</view>
				</view>
				<view class="mes-two">
					<image src="../../static/img/medal.png"></image>
					<view class="null">暂无勋章</view>
				</view>
				<view class="one">线上售出第一单，立即获得勋章</view>
			</view>
			<view class="modeal-down">
				<view class="quan">
					<view class="enjoy"><text>享受权益</text></view>
				</view>
				<view class="ranking">
					<view class="rankings">
						<view class="ranks"><image src="../../static/img/ranking.png" mode=""></image></view>
						<view class="place">供应排名提升</view>
						<view class="exceed">预计超过33.3%的商家</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	methods:{
		toPro(){
			uni.reLaunch({
				url: 'products'
			});
		},
	}
}
</script>

<style lang="scss">
.content{
	.nav{
		padding: 70upx 0 10upx 0;
		text-align: center;
		position: relative;
		width: 100%;
		margin-bottom: 10upx;
		image{
			width: 35upx;
			height: 35upx;
			vertical-align: middle;
			position: absolute;
			left: 30upx;
			bottom: 16.5upx;
		}	
		.title{
			border-radius:30upx;
			font-size:32upx;
			font-weight:400;		
			.green{
				background-color: #55C47D;
				border-radius:30upx 0 0 30upx;
				color: #fff;
				padding: 9upx 15upx;
				border:2upx solid #55C47D;
			}
			.greens{
				background-color: #fff;
				border-radius:0upx 30upx 30upx 0upx;
				color: #55C47D;
				padding: 9upx 15upx;
				border:2upx solid #55C47D;
			}
		}
	}
	.box{
		background-color: #F7F4F8;
		padding: 20upx 0;
		height: 1450upx;
		.modeal-top{
			background-image: url("http://q79q98ocd.bkt.clouddn.com/model-banner.png");
			background-size: 100% 343upx;
			width: calc(92% - 60upx);
			margin: 0 auto;
			height: 273upx;
			padding: 40upx 30upx 30upx 30upx;
			color: #fff;
			position: relative;
			.mes{
				overflow: hidden;
				image{
					width: 100upx;
					height: 100upx;
					float: left;
					padding-right: 15upx;
				}
				.name{
					font-size: 30upx;
					font-weight: 500;
					line-height: 60upx;
				}
				.more{
					font-size: 22upx;
				}
			}
			.mes-two{
				width: 200upx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 40upx;
				image{
					width: 76upx;
					height: 88upx;
				}
				.null{
					font-size: 28upx;
				}
			}
			.one{
				font-size: 24upx;
				text-align: center;
				padding-top: 140upx;
			}
		}
		.modeal-down{
			width: 92%;
			margin: 30upx auto;
			height: 380upx;
			border-radius: 15upx;
			background-color: #fff;
			color: #0D0D0D;
			.quan{
				padding-top: 60upx;
				.enjoy{
					background-image: url("http://q79q98ocd.bkt.clouddn.com/bepho.png");
					background-size: 100% 28upx;
					width: 50%;
					height: 30upx;
					margin: 0 auto;
					position: relative;
					text{
						position: absolute;
						bottom: 5upx;
						left: 120upx;
						font-size: 30upx;
					}
				}
			}
		}
		.ranking{
			padding: 66upx 35upx 0upx 35upx;		
			.rankings{
				padding-bottom: 30upx;
				border-bottom: 1px solid #F7F4F8;
				.ranks{
					width: 80upx;
					height: 80upx;
					background-color: #A9E9C0;
					border-radius: 50%;
					line-height: 80upx;
					text-align: center;
					float: left;
					margin-right: 38upx;
					
					image{
						width: 39upx;
						height: 40upx;
					}
				}
				.place{
					font-size: 28upx;
					line-height: 50upx;
				}
				.exceed{
					font-size: 24upx;
					color: #666;
				}
			}
		}
	}
}
</style>
